<template>
  <div class="orderList">
    <Header>
      <template v-slot:title>
        <div class="row">
          <div class="logo fl">
            <router-link to="/">
              <img src="../assets/image/mall_index/ia_100000001.png" alt="" />
            </router-link>
            <router-link to="/order">
              <div class="title">首页</div>
            </router-link>
            <el-menu
              class="el-menu-demo"
              mode="horizontal"
              @select="handleSelect1"
            >
              <el-submenu index="2">
                <template slot="title">账户设置</template>
                <el-menu-item index="个人信息">个人信息</el-menu-item>
                <el-menu-item index="地址管理">地址管理</el-menu-item>
                <el-menu-item index="账户安全">账户安全</el-menu-item>
                <el-menu-item index="账号关联">账号关联</el-menu-item>
              </el-submenu>
            </el-menu>
          </div>
          <div class="search order fr">
            <form action="">
              <input
                type="text"
                v-model="ipt"
                @keydown.enter.prevent="searchProd(ipt)"
              />
              <button type="button" @click="searchProd(ipt)">
                <i class="iconfont icon-sousuo"></i>
              </button>
            </form>
          </div>
        </div>
      </template>
    </Header>
    <div class="container order">
      <div class="menu">
        <el-tree
          :data="data"
          :props="defaultProps"
          @node-click="handleNodeClick"
          default-expand-all
        ></el-tree>
      </div>
      <div
        class="main_content"
        :class="{ over: orderList.length > 5 && $route.path == '/order' }"
        v-if="!$route.path.includes('detail')"
      >
        <h2 class="main-title">{{ title }}</h2>
        <div class="top" v-show="title == '我的订单'">
          <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
          >
            <el-menu-item index="1">全部订单</el-menu-item>
            <el-menu-item index="2">待付款</el-menu-item>
            <el-menu-item index="3">代发货</el-menu-item>
            <el-menu-item index="4">待收货</el-menu-item>
            <el-menu-item index="5">待评价</el-menu-item>
            <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-menu>
        </div>
        <div
          class="no-data"
          v-show="
            (title != '以旧换新' && title != '我的订单') ||
            (title == '我的订单' && orderList.length == 0 && requestOk)
          "
        >
          <div class="img">
            <img src="../assets/image/other/下载.svg" alt="" />
          </div>
          <div>暂无相关数据</div>
        </div>
        <table
          class="order-item"
          v-for="(item, index) in orderList"
          :key="index"
          v-show="orderList.length && title == '我的订单'"
        >
          <tbody>
            <tr>
              <td>
                <span> 订单号:{{ item.order_id }} </span>
              </td>
              <td colspan="3">下单时间：{{ item.createdAt | timeTran }}</td>
            </tr>
            <tr>
              <td class="goods">
                <div
                  class="goods-item"
                  v-for="(good, index1) in JSON.parse(item.goods_info)"
                  :key="index1"
                >
                  <div class="img">
                    <img :src="good.s_goods_photos[0].path" alt="" />
                  </div>
                  <div class="text">
                    <div class="left">
                      <router-link :to="`/product/${good.id}`">
                        <div class="good-title underline">
                          {{ good.desc.split("-")[0] }}
                        </div>
                      </router-link>
                      <div class="red">￥{{ item.total_price }}</div>
                    </div>
                    <div class="right">X1</div>
                  </div>
                </div>
              </td>
              <td class="price">￥{{ item.total_price }}<br />微信扫一扫</td>
              <td class="detail">
                <div class="gary">待付款</div>
                <div class="underline" @click="toDetail(item.id)">订单详情</div>
              </td>
              <td class="action">
                <button class="pay" @click="toPay(item.id)">立即付款</button>
                <div class="underline" @click="orderCancel(item.id)">
                  取消订单
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        <div class="cls" v-show="title == '以旧换新'">
          <table class="tradeIn-list">
            <thead>
              <th>商品详情</th>
              <th>回收预估价</th>
              <th>状态</th>
              <th>操作</th>
            </thead>
            <tbody>
              <tr>
                <td colspan="4">没有申请记录！</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <router-view v-else :orderCancel="orderCancel"></router-view>
    </div>
    <!-- 底部 -->
    <Footer></Footer>
    <!-- 侧边咨询客服按钮 -->
    <consult-serve></consult-serve>
  </div>
</template>

<script>
import Header from "../components/Header.vue";
import Footer from "../components/Footer.vue";
import ConsultServe from "../components/ConsultServe.vue";
import { getPay, cancel, delOrder } from "../assets/js/request.js";
export default {
  components: {
    Header,
    Footer,
    ConsultServe,
  },
  data() {
    return {
      requestOk: false,
      ipt: "",
      activeIndex: "1",
      title: "我的订单",
      data: [
        {
          label: "订单中心",
          children: [
            {
              label: "我的订单",
            },
            {
              label: "以旧换新",
            },
            {
              label: "我的评价",
            },
            {
              label: "我的售后",
            },
            {
              label: "我的收藏",
            },
          ],
        },
        {
          label: "会员专区",
          children: [
            {
              label: "优惠券",
            },
            {
              label: "代金券",
            },
            {
              label: "积分叠加包",
            },
            {
              label: "中奖记录",
            },
            {
              label: "兑换记录",
            },
            {
              label: "我的试用",
            },
            {
              label: "积分商城",
            },
          ],
        },
        {
          label: "我的服务",
          children: [
            {
              label: "我的产品",
            },
            {
              label: "报修记录",
            },
            {
              label: "电子发票",
            },
          ],
        },
        {
          label: "我的互动",
          children: [
            {
              label: "建议反馈",
            },
            {
              label: "我的咨询",
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      options: [
        {
          value: "全部时间",
          label: "全部时间",
        },
        {
          value: "最近三个月",
          label: "最近三个月",
        },
        {
          value: "最近半年",
          label: "最近半年",
        },
        {
          value: "最近一年",
          label: "最近一年",
        },
        {
          value: "最近三年",
          label: "最近三年",
        },
      ],
      value: "最近三个月",
      orderList: [],
      titleIndex: 1,
    };
  },
  computed: {
    show() {
      if (this.orderList.length == 0) {
        return true;
      } else if (this.titleIndex != 1) {
        return true;
      } else {
        return false;
      }
    },
  },
  filters: {
    timeTran(val) {
      let arr = val.substring(0, 19).split("T");
      let arr1 = arr[1].split(":");
      arr1[0] = +arr1[0] + 8 > 24 ? +arr1[0] + 8 - 24 : +arr1[0] + 8;
      arr[1] = arr1.join(":");
      return arr.join(" ");
    },
  },
  methods: {
    handleNodeClick(data) {
      console.log(data);
      this.title = data.label;
      this.$router.push("/order");
    },
    handleSelect(key, keyPath) {
      this.titleIndex = key;
      console.log(key, keyPath);
    },
    handleSelect1(key, keyPath) {
      this.$router.push({ name: "Member", params: { show: key } });
    },
    searchProd(ipt) {
      if (this.ipt) {
        this.$bus.$emit("sendIpt", ipt);
        this.$router.push(`/search/?word=${ipt}`);
        this.ipt = "";
      }
    },
    toDetail(id) {
      this.title = "订单详情";
      this.$router.push(`/order/detail/${id}`);
    },
    orderCancel(id) {
      this.$confirm("确定取消订单么?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "暂不取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          delOrder(id).then(async () => {
            getPay().then((res) => {
              this.orderList = res.rows;
              this.$router.push("/order");
              this.title = "我的订单";
            });
          });
        })
        .then(() => {
          this.$message({
            type: "success",
            message: "取消成功!",
          });
        })
        .catch(() => {
          console.log("取消");
        });
    },
    //去支付
    toPay(id) {
      this.$router.push(`/pay/${id}`);
    },
  },
  beforeRouteEnter(to, from, next) {
    if (sessionStorage.getItem("token")) {
      next();
    } else {
      next("/login");
    }
  },
  async created() {
    let res = await getPay();
    this.orderList = res.rows;
    this.requestOk = true;
  },
};
</script>

<style lang="scss">
.orderList {
  background-color: #f2f2f2;
  .row {
    .logo {
      padding: 0;
      height: 80px;
      line-height: 80px;
      display: flex;
      align-items: center;
      a {
        img {
          display: block;
          width: 120px;
          height: 33px;
        }
      }
      .title {
        margin-left: 70px;
        margin-right: 10px;
        font-size: 14px;
        color: #909399;
      }
      .el-menu-demo {
        border-width: 0;
        .el-submenu.is-active {
          .el-submenu__title {
            border-width: 0;
          }
        }
      }
    }
    .search.order {
      margin-top: 20px;
      form {
        position: relative;
        height: 40px;

        input {
          width: 412px;
          height: 40px;
          line-height: 40px;
          padding-left: 5px;
          outline: 0;
          color: #757575;
          border: 1px solid #ccc;
          background-color: #fff;
          float: left;
        }

        button {
          height: 40px;
          margin-left: -1px;
          width: 40px;
          cursor: pointer;
          color: #757575;
          border: 1px solid #ccc;
          background-color: #fff;
          float: left;

          .iconfont {
            font-size: 26px;
          }
        }
      }
    }
  }
  .container.order {
    padding-top: 40px;
    padding-bottom: 20px;
    position: relative;
    overflow: hidden;
    .menu {
      float: left;
      background-color: #fff;
      width: 250px;
      height: 783px;
      overflow: scroll;
      .el-tree {
        padding: 30px 0;
        .el-tree-node__content {
          color: #333;
          height: 40px;
        }
        .el-tree-node__children {
          .el-tree-node__label {
            color: #999;
          }
        }
      }
    }

    .main_content {
      float: right;
      width: calc(100% - 250px);
      padding-left: 20px;
      &.over {
        overflow: scroll;
        height: 783px;
      }
      h2 {
        height: 60px;
        line-height: 60px;
        padding-left: 20px;
        font-size: 25px;
        font-weight: 400;
      }
      .top {
        .el-menu-demo {
          position: relative;
          height: 70px;
          padding: 10px 20px 20px;
          .el-menu-item {
            font-size: 16px;
            height: 40px;
            line-height: 40px;
            &.is-active {
              color: #263746;
              border-bottom: 2px solid #263746;
            }
          }
          .el-select {
            float: right;
            .el-input.is-focus {
              input {
                border: 1px solid;
              }
            }
            .el-input.el-input--suffix {
              input {
                border: 1px solid;
              }
            }
          }
        }
      }
      .no-data {
        line-height: 2;
        padding: 100px 0;
        background-color: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        .img {
          img {
            width: 60px;
          }
        }
      }
      .cls {
        background-color: #fff;
        padding: 20px;
        table {
          table-layout: fixed;
          width: 100%;
          line-height: 1.5;
          font-size: 12px;
          border-collapse: collapse;
          border-spacing: 0;
          display: table;

          thead {
            line-height: 50px;
            th {
              text-align: center;
              font-size: 14px;
              color: #333;
              font-weight: 400;
            }
          }
          tbody {
            tr {
              background-color: #f2f2f2;
              line-height: 40px;
              td {
                text-align: center;
              }
            }
          }
        }
      }
      .order-item {
        border-collapse: collapse;
        border-spacing: 0;
        width: 100%;
        line-height: 1.5;
        background-color: #fff;
        tbody {
          tr {
            width: 100%;
            font-size: 12px;
            line-height: 1.5;
            &:first-of-type {
              background-color: #f9f9f9;
            }
            td {
              padding: 10px 0;
              &:first-of-type {
                padding-left: 20px;
              }
              &:last-of-type {
                text-align: right;
                padding-right: 20px;
              }
              .underline {
                &:hover {
                  text-decoration: underline;
                  cursor: pointer;
                  color: #ee0a3b;
                }
              }
            }
            .goods {
              width: 450px;
              .goods-item {
                display: flex;
                align-items: center;
                & > div {
                  display: flex;
                  align-items: center;
                }
                .text {
                  .left {
                    width: 200px;
                    a {
                      color: #333;
                      .good-title {
                        max-height: 40px;
                        overflow: hidden;
                      }
                    }
                    .red {
                      width: 200px;
                      color: #ee0a3b;
                    }
                  }
                  .right {
                    width: 100px;
                    text-align: center;
                  }
                }
                img {
                  width: 75px;
                  height: 75px;
                }
              }
            }
            .detail {
              text-align: center;
              .gary {
                color: #777;
              }
            }
            .action {
              text-align: center;
              .pay {
                color: #fff;
                background-color: #ee0a3b;
                border-color: #ee0a3b;
                display: inline-block;
                border: 1px solid;
                line-height: normal;
                padding: 5px 15px;
                transition: 0.1s;
                cursor: pointer;
                outline: 0;
              }
              div {
                padding: 5px 15px;
              }
            }
          }
        }
      }
    }
  }
  .el-select-dropdown__item {
    color: #606266;
    &.selected {
      color: #263746;
      font-weight: 700;
    }
  }
}
</style>